* {
  box-sizing: border-box;
}

::selection {
  background-color: #000;
  color: #fff;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background-color: rgb(131, 137, 151);
  color: white;
}

div#app {
  display: table;
  width: 100%;
}

.hidden { display: none; }

.message {
  display: table-row;
  transition: 0.5s all ease;
}

.message .timestamp, .message .msg {
  padding: 4px 10px;
  border-bottom: 1px solid rgb(128, 128, 128);
  display: table-cell;
  vertical-align: middle;
}

.message .timestamp { font-weight: bold; }

.message .details {
  font-family: 'Menlo', 'Courier New', Courier, monospace;
  font-weight: bold;
}

.message .expand-details {
  width: 0px;
  height: 0px;
  border-top: 10px solid #666;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: none;
  margin-left: 5px;
  float: right;
}

.message .details .more { color: #000; }

.verbose {
  background-color: #d6d6d6;
  color: #aaa;
}

.verbose:hover { background-color: white; }

.warning {
  background-color: rgb(221, 221, 81);
  color: rgb(109, 109, 8);
}

.warning:hover { background-color: rgb(253, 253, 176); }

.info {
  background-color: rgb(144, 190, 251);
  color: rgb(38, 94, 168);
}

.info:hover { background-color: rgb(217, 233, 255); }

.error {
  background-color: rgb(230, 121, 121);
  color: rgb(126, 47, 47)
}

.error:hover { background-color: rgb(247, 188, 188); }
